<template>
  <div class="loginforme-page">
    <ul>
      <li>
        <div class="loginforme">
          <ul class="content">
            <li class="top_header">
              <span>Xender-Wallet</span>
            </li>
            <li style="margin-top:10px;">
              <img src="../assets/img/LOGO-96.png">
            </li>
            <div class="content_form">
              <li style="margin-top:20px">
                <div class="inputbody">
                  <input placeholder="用户名">
                </div>
                <div class="inputbody">
                  <input placeholder="密码">
                </div>
              </li>
              <li style="margin-top:30px">
                <div @click="login" class="button_style">登录</div>
              </li>
              <li class="register">
                <div class="basebnt" style="color:#0281e8">立即注册</div>
                <div class="basebnt">忘记密码?</div>
              </li>
            </div>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import axios from "axios";
@Component({
  components: {}
})
export default class Login extends Vue {
  private data() {
    var validatePass = (rule: object, value: string, callback: any) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule: object, value: string, callback: any) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    return {
      lg: {
        username: "",
        password: ""
      },
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        username: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  }
  submitForm(formName: any) {
    (this.$refs[formName] as any).validate((valid: any) => {
      if (valid) {
        this.login();
      } else {
        console.log("error submit!!");
        return false;
      }
    });
  }
  resetForm(formName: any) {
    (this.$refs[formName] as any).resetFields();
  }
  login() {
    axios
      .get("/login", {
        params: (this as any).lg
      })
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  }
}
</script>

<style lang="scss">
.loginforme-page {
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/bg.png");
  background-repeat: repeat;
  position: absolute;
  .loginforme {
    .content {
    }
    .content_form {
      margin: 0 auto;
      margin-left: 30px;
      margin-right: 30px;
      .inputbody {
        margin-bottom: 20px;
        border-radius: 5px;
        :focus {
          border: 1px solid #0281e8;
        }
      }
      input {
        width: 100%;
        height: 40px;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 5px;
        background: #efefef;
      }
      input:focus,
      textarea:focus {
        outline: none;
      }
      .button_style {
        height: 40px;
        width: 100%;
        line-height: 40px;
        color: #fff;
        margin-top: 10px;
        border-radius: 10px;
        background: #0093ff;
        cursor: pointer;
      }
      .register {
        display: flex;
        margin-top: 23px;
        color: #d8d3d3;
        font-size:0.8rem;
        justify-content:space-between;
      }
      .basebnt{
          cursor: pointer;
      }
    }
    width: 400px;
    margin-top: 200px;
    position: absolute;
    background: #fff;
    height: 450px;
    left: 50%;
    border-radius: 10px;
    margin-left: -200px;
    .top_header {
      height: 50px;
      line-height: 50px;
      font-size: 1.5rem;
      background: #f1f1f1;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      text-align: center;
    }
  }
}
</style>
 